<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品添加页面</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
    <style>
        #imagePreview .image-item {
            position: relative;
            display: inline-block;
        }

        #imagePreview .del-btn {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            padding: 5px;
            font-size: 10px;
            background-color: red;

        }
    </style>
</head>


<body>

    <div class="layui-container" style="margin-top: 20px;">
        <form class="layui-form" action="" method="post">

            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="good_name" required lay-verify="required" placeholder="请输入商品名称"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" required  placeholder="请输入商品描述"
                        class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-block">
                    <select name="good_type" required lay-verify="required">
                        <option value="">请选择商品类型</option>
                        <option value="1">会员</option>
                        <option value="2">卡密(会员、经验)</option>
                        <option value="3">自营商品</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所需积分</label>
                <div class="layui-input-block">
                    <input type="number" name="score" required lay-verify="required" placeholder="请输入所需积分"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">对应奖励</label>
                <div class="layui-input-block">
                    <input type="text" name="value" required placeholder="请输入对应数值(天数|数量)"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-block">
                    <input type="number" name="stock" value="100" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status" required lay-verify="required">
                        <option value="1" selected>正常</option>
                        <option value="0">下架</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权重</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" value="100" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="uploadImages">上传图片</button>
                    <div id="imagePreview" style="margin-top: 10px;"></div>
                    <input type="hidden" name="images" id="images">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addGoods">提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['form', 'upload'], function () {
            var form = layui.form,
                upload = layui.upload;
            $ = layui.$
            // 上传图片
            var imageList = [];
            upload.render({
                elem: '#uploadImages',
                url: '/admin/good/uploadImg' // 假设的上传接口
                , multiple: true
                , accept: 'file'
                , done: function (res) {
                    if (res.code === 200) { // 假设返回格式 { code: 0, msg: '上传成功', data: { src: '图片地址' } }
                        imageList.push(res.data.src); // 将上传的图片地址存入数组
                        renderImages(); // 渲染图片
                    } else {
                        layer.msg('上传失败：' + res.message);
                    }
                }
                , error: function () {
                    layer.msg('上传出现错误');
                }
            });

            // 渲染图片
            function renderImages() {
                var imagePreview = $('#imagePreview');
                imagePreview.empty();
                if(!Array.isArray(imageList)){
                    imageList = imageList.split(',')
                }
                imageList.forEach(function (item, index) {
                    imagePreview.append(`<div class="image-item">
                            <img src="${item}" style="width: 100px; margin-right: 10px;" />
                            <div class="del-btn" onclick="delImage('${item}',this)">删除</div>
                        </div>`);

                });
                $('#images').val(imageList.join(','));
            }

            form.on('submit(addGoods)', function (data) {
                console.log(data.field); 
                $.post('/admin/good/doAdd', data.field, function (response) {
                    if (response.code === 200) {
                        layer.msg('商品添加成功');
                    } else {
                        layer.msg('商品添加失败：' + response.msg);
                    }
                });
                return false; 
            });
        });
        function delImage(url,that) {
            imageList.pop(url);
            $('#images').val(imageList.join(','));
            $(that).parents()[0].remove()
        }
    </script>

</body>

</html>